<template>
  <div class="notice-board">
    <s-header name="开工申请审批" :back="'/government/home'"></s-header>
    <van-tabs
      v-model:active="active"
      color="#FED045"
      background="linear-gradient(90deg, #206dec, #359eff)"
      title-active-color="#fff"
      title-inactive-color="#dfe9ff"
      :before-change="beforeChange"
      class="tabs-box"
    >
      <van-tab v-for="tab in tabList" :key="tab.id" :name="tab.code" :title="tab.desc">
        <div class="content">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="product-list-refresh">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              :finished-text="dataList.length ? '没有更多了' : '暂无记录'"
              @load="onLoad"
              @offset="10"
            >
              <template v-if="dataList.length">
                <temp-card v-for="(item, index) in dataList" :isShow="tab.isShow" :key="index" ref="recordCard" :value="item" />
              </template>
             <van-image v-else :src="listNull" class="empty" width="120" alt="搜索" />
            </van-list>
          </van-pull-refresh>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import sHeader from '@/components/SimpleHeader'
import tempCard from './components/tempCard'
import { queryTabList } from '@/service/govern'
import { getLoitBuildStartApplyQueryPage } from '@/service/start-apply'
import listNull from '@/assets/Images/list_null.png'
export default {
  components: {
    sHeader,
    tempCard,
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      listNull: listNull,
      active: '',
      loading: false,
      listQuery: { pageNo: 1, pageSize: 5 },
      totalPage: 0,
      refreshing: false,
      finished: false,
      tabList: [],
      dataList: [],
    })
    state.active = Number(route.query.applyType) || 1

    onMounted(() => {
      getTabList()
      // getDataList();
    })
    const getTabList = async () => {
      const { data, success } = await queryTabList({ type: 6 })
      if (success) {
        state.tabList = data
        state.active = state.tabList[0].code
        state.tabList.forEach((res) => {
          res.id = res.code
        })
      }
    }
    // 切换标签页
    const beforeChange = (index) => {
      state.active = index
      onRefresh()
    }
    const goBack = () => {
      router.go(-1)
    }
    // 刷新列表
    const onRefresh = () => {
      state.refreshing = true
      state.finished = false
      state.loading = true
      state.listQuery.pageNo = 1
      onLoad()
    }
    // 加载列表
    const onLoad = () => {
      if (!state.refreshing && state.listQuery.pageNo < state.totalPage) {
        state.listQuery.pageNo = state.listQuery.pageNo + 1
      }
      if (state.refreshing) {
        state.dataList = []
        state.refreshing = false
      }
      getDataList()
    }
    //获取列表
    const getDataList = async () => {
      let list = []
      let totalPage = 0
      state.listQuery.applyStatus = state.active + ''
      let res = await getLoitBuildStartApplyQueryPage(state.listQuery).finally(() => {
        state.finished = true
        state.loading = false
      })
      list = res.body.page.records
      for (let index = 0; index < list.length; index++) {
        const item = list[index]
        item.showTime = true
        if (list[index - 1] && item.applyTime === list[index - 1].applyTime) {
          item.showTime = false
        }
      }
      totalPage = res.body.page.total
      state.dataList = state.dataList.concat(list)
      state.totalPage = totalPage
      state.loading = false
      if (state.dataList.length >= totalPage) state.finished = true
    }
    return {
      ...toRefs(state),
      onLoad,
      goBack,
      beforeChange,
      onRefresh,
      getTabList,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.notice-board {
  min-height: 100vh;
  font-size: 14px;
  color: #2e3f6a;
  font-weight: 400;
  background-color: rgb(246, 245, 250);
  .tabs-box {
    .content {
      overflow: hidden;
      overflow-y: scroll;
      padding: 0 15px;
      width: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      .empty {
        display: block;
        width: 150px;
        margin: 50px auto 20px;
      }
    }
  }
}
</style>